<script setup lang='ts'>
import { ThemeInfo } from '@/config/theme-info';

defineProps<{
  spin: boolean
}>();

const bgColor = computed(() => ThemeInfo.MAIN_COLOR);

</script>

<template>
  <view class="relative w-full overflow-hidden">
    <!-- Slot内容容器 -->
    <view class="w-full" :style="{ opacity: spin ? 0 : 1, transition: 'opacity 0.2s' }">
      <slot />
    </view>
    <!-- Loading动画 -->
    <view
      v-show="spin"
      class="absolute inset-0 z-10 flex items-center justify-center bg-white/70"
    >
      <!-- 经典旋转三环加载动画（主题色） -->
      <view class="spin-loader">
        <view class="spin-logo__inner absolute left-1/2 top-0 size-[40px] -translate-x-1/2" />
        <view
          class="spin-shape shape1"
          :style="{ background: `${bgColor}` }"
        />
      </view>
    </view>
  </view>
</template>

<style lang='scss' scoped>
.spin-loader {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--main-color);
  border-radius: 16rpx;

  .spin-logo__inner {
    background: url('/static/logo.png') no-repeat center center;
    background-size: contain;
  }
}

.spin-shape {
  width: 200%;
  height: 200%;
  border-radius: 43%;
  animation: spin-ani 4s linear infinite;
}

.shape1 {
  position: absolute;
  bottom: -178%;
  left: -50%;
}

@keyframes spin-ani {
  100% {
    transform: rotate(360deg);
  }
}
</style>
